<template>
<div id="Login">
    <div class="top"></div>
    <div class="fangshi">
        <span>手机短信登录</span> 
    </div>
    <div class="imelet">
        <input type="text" placeholder="输入手机号" class="loginInput0" v-model="value">
        <input type="password" placeholder="请输入密码" class="loginInput0" v-model="mima">
        <!-- <div class="yanzhengbox">
            <input type="text" placeholder="请输入验证码" class="loginInput" v-model="sum"><van-button type="primary" class="yanzheng" @click="huoqu">获取验证码</van-button>
        </div> -->
    </div>
    <div class="dengbox">
        <van-button type="primary" class="deng" @click="denglu">快速登录</van-button>
    </div>
    <div class="textbox">
        <router-link to="/reg">
            <li class="tiao">第一次加入大麦?点击这里注册</li>
        </router-link>
        <li>击登录或完成账号注册表示您已阅读并同意</li>  
        <li>大麦《大麦用户服务协议v3.3》及《隐私政策》</li>
    </div>
</div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);

export default {
    name:"Login",
    data(){
        return {
            sum:"",
            value:"19899999999",
            mima:"123456"
        }
    },
    methods:{
        huoqu(){
            if(!(/^1[3456789]\d{9}$/.test(Number(this.value)))){
                Toast.fail('电话号码错误');
            }else{
                axios.defaults.headers = {
                    'Content-type': 'application/x-www-form-urlencoded'
                }
                axios({
                    url:`/readers`,
                    // method:"post",
                    params:{
                        id:this.value
                    }
                }).then(res=>{
                    Toast.success('发送成功');
                    console.log(res.data)
                }).catch(res=>{
                    if(res){
                        Toast.fail('网络连接错误');
                    }
                })
            }
        },
        denglu(){
            if(!(/^1[3456789]\d{9}$/.test(Number(this.value)))){
                Toast.fail('电话号码错误');
            }else{
                if( this.mima == ""){
                    Toast.fail('请输入密码');
                        // console.log(this.mima)
                        // console.log(this.value)
                    return;
                }
                axios({
                    url:"/readers",
                    // method:"post",
                    params:{
                        phonenumber:this.value,
                        pass:this.mima
                    }
                }).then(res=>{
                    if(res.data == 1){
                        Toast.success('登录成功');
                        // console.log("res.data",res.data)
                        // this.$router.push('/Mines'+res.data[0].id);
                        this.$router.push({path:'/Minezhuce',query:{plan:this.value}})
                        // console.log(res.data[0].id)
                    }else{
                        console.log("this.sum",this.sum)
                        console.log("res.data",res.data)
                        Toast.fail('请先注册');
                    }
                }).catch(res=>{
                    if(res){
                        Toast.fail('网络连接错误');
                    }
                })
            }
        }
    }
}
</script>

<style scoped>
#Login{
    height: 100%;
    display: flex;
    flex-direction:column;
    align-items: center;
}
.top{
    width: 100%;
    height: 3rem;
    background: url(../../public/img/deng1.png) no-repeat center;
    background-size: contain;
}
.fangshi{
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.2rem;
    border-bottom: 5px solid green;
    box-sizing: border-box;
    color: green;
}
.imelet{
    width: 100%;height: 2rem;
    display: flex;
    flex-direction:column;
    align-items: center;
    box-sizing: border-box;
    padding: 0.3rem 0.5rem; 
}
.loginInput0{
    width: 100%;
    height: 0.4rem;
    background-color: #f7f7f7;
    margin-bottom: 0.2rem;
    font-size: 0.15rem;
}
.yanzhengbox{
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
}
.loginInput{
    width: 70%;
    height: 0.4rem;
    background-color: #f7f7f7;
    font-size: 0.15rem;
}
.yanzheng{
    width: 28%;
    height: 0.4rem;
    vertical-align : middle;
    font-size: 0.1rem;
}
.dengbox{
    width: 100%;
    padding: 0 0.5rem; 
    box-sizing: border-box;
}
.deng{
    width: 100%;
    height: 0.4rem;
}
.textbox{
    display: flex;
    flex-direction:column;
    align-items: center;
    width: 100%;
    height: 2rem;
    font-size: 0.1rem;
}
.tiao{
    color: green;
    height: 0.5rem;
    font-size: 0.13rem;
    line-height: 0.5rem;
}
</style>